<template>
  <div class="app-container">
    <template v-if="showCoinsPage == true">
      <div class="search-bar">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="状态">
            <enum-select
              v-model="queryParams.status"
              clearable
              placeholder="请选择状态"
              :enums="CASH_TYPE_ENUM"
            ></enum-select>
          </el-form-item>
          <el-form-item label="申请时间">
            <el-date-picker
              v-model="tempTime"
              :editable="false"
              type="datetimerange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="截止时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 340px"
              :default-time="defaultTime"
              @change="handleChangeTime"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <template #icon>
                <Search />
              </template>
              搜索
            </el-button>
            <el-button @click="handleResetQuery">
              <template #icon>
                <Refresh />
              </template>
              重置
            </el-button>
            <el-button type="primary" @click="dialogVisible = true">
              <template #icon>
                <Plus />
              </template>
              新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <BasePageTable
        :table-data="tableData"
        :table-columns-data="tableColumnsData"
        :total="total"
        :loading="loading"
        :pageSize="queryParams.pageSize"
        @handleQuery="changePage"
      >
        <template #index="scope">
          {{ scope.index + 1 }}
        </template>
        <template #coinsNumber="{ row }">
          {{ row.coins / 10 }}
        </template>
        <template #status="{ row, name }">
          {{ getLabelByValue(CASH_TYPE_ENUM, row.status) }}
        </template>
        <template #receiptFile="{ row }">
          <div>
            <MultiImageUpload
              v-model="row.files"
              disabled
              :showTip="false"
              :limit="row.files?.length ?? 1"
            />
          </div>
        </template>
        <template #operation="{ row, name }">
          <!-- <el-button link type="primary" @click="handleEdit(row, 'handle')">重新提交</el-button> -->
          <el-button link type="primary" @click="handleEdit(row, 'look')">查看详情</el-button>
        </template>
      </BasePageTable>
      <el-dialog v-model="dialogVisible" title="新增" width="500" :before-close="handleClose">
        <div>
          <el-form ref="formRef" :rules="rules" :model="cashForm" label-width="auto">
            <el-form-item label="提现积分" prop="coins">
              <el-input-number v-model="cashForm.coins" :min="1" :max="99999999" step="2" />
            </el-form-item>
            <el-form-item label="上传发票" prop="receiptFile">
              <MultiImageUpload v-model="cashForm.receiptFile" :showTip="false" :limit="2" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="sbumit">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </template>
    <template v-else>
      <coninsCashForm :cashData="cashData" @backTo="cashBackTo"></coninsCashForm>
    </template>
  </div>
</template>
<script setup>
import { CASH_TYPE_ENUM } from "@/enums/conins/coinsCash";
import coninsCashForm from "../components/conisCashForm/index.vue";
import cashApi from "@/api/coins/cash-api";
import { getLabelByValue, getLabelValueList } from "@/utils/enums";
const { proxy } = getCurrentInstance();

const showCoinsPage = ref(true);
const loading = ref(false);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  status: "",
  beginTime: "",
  endTime: "",
});
const tempTime = ref();
const defaultTime = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)];
const dialogVisible = ref(false);
const tableData = ref([]);
const total = ref(0);
const cashData = ref({});
const tableColumnsData = ref([
  {
    label: "序号",
    prop: "index",
    align: "center",
    width: 60,
    customSlot: "index",
  },
  {
    prop: "companyName",
    label: "申请公司",
    showOverflowTooltip: true,
  },
  {
    prop: "viewUserVo.nickname",
    label: "申请人员",
    showOverflowTooltip: true,
  },
  {
    prop: "currentCoins",
    label: "总积分",
    showOverflowTooltip: true,
  },
  {
    prop: "coins",
    label: "提现积分",
    showOverflowTooltip: true,
  },
  {
    prop: "categoryText",
    label: "提现金额(元)",
    showOverflowTooltip: true,
    customSlot: "coinsNumber",
  },
  // {
  //   prop: "categoryText",
  //   label: "剩余积分",
  //   showOverflowTooltip: true,
  // },
  {
    prop: "receiptFile",
    label: "发票凭证",
    customSlot: "receiptFile",
  },
  {
    prop: "status",
    label: "状态",
    showOverflowTooltip: true,
    customSlot: "status",
  },
  {
    prop: "applyTime",
    label: "申请时间",
    showOverflowTooltip: true,
  },
  {
    prop: "operation",
    label: "操作",
    width: 180,
    align: "center",
    fixed: "right",
    customSlot: "operation", // 自定义插槽名称
  },
]);

const cashForm = reactive({
  coins: null,
  receiptFile: [],
});

const rules = ref({
  coins: [{ required: true, message: "请输入提现积分", trigger: "blur" }],
  receiptFile: [{ required: true, message: "请上传发票", trigger: "change" }],
});

function handleSearch() {
  queryParams.pageNum = 1;
  getList();
}

function handleChangeTime(val) {
  if (val) {
    const [startTime, endTime] = val;
    queryParams.beginTime = startTime;
    queryParams.endTime = endTime;
  } else {
    queryParams.beginTime = "";
    queryParams.endTime = "";
  }
}
// 重置查询
function handleResetQuery() {
  queryParams.status = "";
  queryParams.pageNum = 1;
  queryParams.beginTime = "";
  queryParams.endTime = "";
  tempTime.value = [];
  getList();
}
function sbumit() {
  proxy.$refs["formRef"].validate(async (valid) => {
    if (valid) {
      let fromData = {
        coins: cashForm.coins,
        receiptFile: JSON.stringify(cashForm.receiptFile),
      };
      addCash(fromData);
    }
  });
}

function changePage(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  getList();
}

function addCash(fromData) {
  loading.value = false;
  try {
    cashApi
      .add(fromData)
      .then((data) => {
        ElMessage.success("正在提交审核");
        closeEmpty();
        getList();
      })
      .finally(() => {
        loading.value = false;
      });
  } catch (err) {}
}

function closeEmpty() {
  cashForm.coins = "";
  cashForm.receiptFile = [];
  dialogVisible.value = false;
}

function getList() {
  loading.value = false;
  try {
    cashApi
      .getPage(queryParams)
      .then((data) => {
        tableData.value = data.list || [];
        if (tableData.value) {
          for (let i = 0; i < tableData.value.length; i++) {
            tableData.value[i].files = JSON.parse(tableData.value[i].receiptFile);
          }
        }
        total.value = data.total;
      })
      .finally(() => {
        loading.value = false;
      });
  } catch (err) {}
}

function handleEdit(row, type) {
  showCoinsPage.value = false;
  cashData.value = row;
}

function cashBackTo() {
  showCoinsPage.value = true;
}

function handleClose() {
  closeEmpty();
}

onMounted(async () => {
  getList();
});
</script>
